<template>
	<view class="wc-rotate-count-down">
		<view class="wc-rotate-count-down__rotate-wrap">
			<image
				class="wc-rotate-count-down__rotate"
				:style="imageRotateDeg"
				mode="aspectFill"
				src="@/static/img/lottery/lottery_item_bg.png"
			></image>
			<!-- <view class="wc-rotate-count-down__rotate">
				<wc-circleprogress></wc-circleprogress>
			</view> -->
			<view class="<!-- wc-rotate-count-down__rotate-content -->">
				<text class="" style="font-size: 24rpx;color:#fff;">{{ remainingTimeText }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	let downImgTimer = null
	export default {
		name: "RotateCountDown",
		props: {
			// 倒计时总时间，单位秒
			videoDuration: {
				type: Number,
				default: 60,
			},
			videoDownTime: {
				type: Number,
				default: 60,
			},
			isPause: {
				type: Boolean,
				default: false
			},
			isPlay: {
				type: Boolean,
				default: false
			},
			isEnd: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 定时器
				intervalId: null,
				percent: 30,
				rotateDeg: 0,
				downImgTimer: null,
				localDownTime: 0
			};
		},
		computed: {
			// 倒计时长。如果时间超过 120s, 就以 03:00 的方式来显示
			remainingTime() {
				return this.localDownTime > 0 ? this.localDownTime : 0;
			},
			remainingTimeText() {
				if (this.remainingTime > 120) {
					let m = Math.floor(this.remainingTime / 60)
					let s = Math.floor(this.remainingTime % 60)
					if (m < 10) {
						m = `0${m}`
					}
					if (s<10) {
						s = `0${s}`
					}
					return `${m}:${s}`
				}
				return Math.floor(this.remainingTime);
			},
			imageRotateDeg() {
				return {
					transform: `rotate(${this.rotateDeg}deg)`
				}
			}
		},
		watch: {
			videoDuration(v) {
				this.rotateDeg = 0
				this.localDownTime = v
				if (v) {
					// this.startCountdown()
					this.$nextTick(() => {
						this.imgRotate(0)
					})
				}
				
			},
			localDownTime(newVal, oldVal) {
				if (newVal <= 1) {
					this.clearInterval();
					this.$emit('countdown-end');
					clearInterval(downImgTimer)
					downImgTimer = null
				}
				
			},
			isPause(v) {
				if (v) {
					this.clearInterval()
				} else {
					if (!this.isEnd) {
						this.imgRotate(this.rotateDeg)
					}
					
				}
			},
			isEnd(v) {
				// console.log("视频结束了", v)
				if (v) {
					this.rotateDeg = 0
					this.clearInterval()
				}
				
			},
			rotateDeg(v){
				// console.log('rotateDeg', v)
			},
			isPlay(v) {
				if (v) {
					this.startCountdown()
				}
			}
			
		},
		created() {
			this.localDownTime = this.videoDuration
			
		},
		mounted() {
			// this.imgRotate()
		},
		beforeDestroy() {
			this.clearInterval();
			// clearInterval(downImgTimer)
			// downImgTimer = null
		},
		methods: {
			// 图片滚动
			imgRotate(value) {
				// console.log("imgRotate 1", this.rotateDeg)
				const vm = this
				vm.rotateDeg = value || 0
				
				clearInterval(downImgTimer)
				downImgTimer = null
				
				
				this.$nextTick(() => {
					// const time =  vm.videoDuration * 1000 / 360
					const time = 50
					// console.log("interver time ", time, vm.videoDuration)
					clearInterval(downImgTimer)
					downImgTimer = null
					// this.videoDuration * 1000 / 360
					downImgTimer = setInterval(() => {
						vm.rotateDeg++
						if (vm.rotateDeg % 360 === 0) {
							vm.rotateDeg = 0
						}
						// console.log("vm.rotateDeg", vm.rotateDeg)
						// console.log("这是森", vm.rotateDeg)
					}, time )
				})
			},
			// 如果视频播放的时候，没有取消进度条
			startCountdown() {
				const vm = this
				this.clearDownTimeInterval();
				this.intervalId = setInterval(() => {
					vm.$emit('update:videoDownTime', vm.localDownTime-- );
				}, 1000);
			},
			clearDownTimeInterval() {
				clearInterval(this.intervalId);
				this.intervalId = null;
			},
			clearInterval() {
				
				// console.log('downImgTimer clearInterval', downImgTimer)
				clearInterval(downImgTimer)
				downImgTimer = null
				this.clearDownTimeInterval()
			},
			remainingTimeFormat () {
				
			}
		},
		
	}
</script>

<style >
	.wc-rotate-count-down {
		position: relative;

		
	}
	/* .wc-rotate-count-down__rotate-wrap {
		position: fixed;
		top: 150rpx;
		left: 100rpx;
		width: 80rpx;
		height: 80rpx;
		overflow: hidden;
		z-index: 999;
	} */
	
	.wc-rotate-count-down__rotate {
		position: fixed;
		top: 115rpx;
		left: 100rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		/* transform: rotate(0deg); */
		z-index: 999;
	}
	
	.wc-rotate-count-down__rotate-content {
		position: fixed;
		top: 115rpx;
		left: 100rpx;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		/* background-color: yellow; */
		
	}

	@keyframes rotoImg {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>